<form onsubmit="return false;" action="{:request()->url()}" data-auto="true" method="post" class='layui-form layui-card' autocomplete="off">

    <div class="layui-card-body">

        <div class="layui-form-item">
            <label class="layui-form-label label-required-prev">素材名称</label>
            <div class="layui-input-block">
                <input name="name" required value='{$info.name|default=""}' placeholder="请输入素材名称" class="layui-input">
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label ">所属店铺</label>
            <div class="layui-input-block">            
            <select class="layui-select" name="shop_id" >
            	  <option style="display: none" value="">请选择所属店铺</option>
                {foreach $shop_op as $k=>$v}
                {if (isset($info.shop_id) and $info.shop_id eq $k)}
                <option selected value="{$k}">{$v}</option>
                {else}
                <option value="{$k}">{$v}</option>
                {/if}
                {/foreach}
            </select>
            </div>
        </div>  
        <div class="layui-inline ">
            <label class="layui-form-label ">缩略图：</label>
            <div class="layui-input-inline seller-inline-11">
                <div class="thumb_img">
                    <img alt="icon" style="height:200px; width: 200px;border: 1px solid #e6e6e6; display: block;" src="{$info.thumb_img|default='__ROOT__/static/admin/img/jcfw.png'}"/>
                    <input type="hidden" name="thumb_img" 
                           value="{$info.thumb_img|default=''}"
                           class="layui-input">
                    <span style="display: inline-block;padding-top: 20px;color: red">图片大小建议不超过2M，图片格式为jpg、jpeg、png</span>
                  
                    <div>
                        <a class="margin-top-10 layui-btn think-form-group-right  layui-btn-normal" 
                           data-type="jpg,png,jpeg" data-field="business_license" id='thumb_img'>上传图片</a>
                    </div>
                </div>
            </div>          
        </div>
        <div class="layui-form-item" style="margin-top: 20px;">
            <label class="layui-form-label">上传附件</label>
            <div class="layui-input-block">
            	<div style="padding-right: 10px; color: #999;" class="uploadName">
            		<p >{$info.annex_name|default=''} <i class="layui-icon" >&#x1006;</i></p>
                </div>
                <button type="button" class="layui-btn" id="upload">
                    <i class="layui-icon">&#xe62f;</i>附件上传
                </button>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top: 20px;">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea"  name="desc" >{$info.desc|default=''}</textarea>
            </div>
        </div>

    </div>

    <div class="hr-line-dashed"></div>
    <input type='hidden' value='{$info.annex_url|default=''}' name='annex_url' id="annex_url">
    <input type='hidden' value='{$info.annex_name|default=''}' name='annex_name' id="annex_name">
	<input type='hidden' value='{$id}' name='id' >
    <div class="layui-form-item text-center">
        <button class="layui-btn" type='submit'>保存</button>
        <button class="layui-btn layui-btn-danger" type='button' data-close>取消</button>
    </div>
    <script>
        const uploadData={
            annex_name:[],
            annex_url:[],
        }
    	layui.use('upload', function(){
    		
    		uplodImg('thumb_img');
            // uplodImg('image_mini');
            function uplodImg(id){
                var upload = layui.upload;
                var uploadInst = upload.render({
                    elem: '#'+id //绑定元素
                    ,url: "{:url('image_upload')}" //上传接口
                    ,accept:"images"
                    ,field:"image"
                    ,choose: function(obj){
                    	layer.load(); //上传loading
                    }
                    ,before: function (obj) { // 图片上传回调
								        obj.preview(function (index, picture, result) {
								            $("."+id+' img').attr("src", result);
								        });
								    }
                    ,done: function(res){
                    //上传完毕回调
												layer.closeAll('loading'); //关闭loading
                        if(res.code == 1){                          
                            $('[name="'+id +'"]').val(res.data)
                            $("."+id+' img').attr('src',res.data)                          
                        }
                    }
                    ,error: function(){
                    //请求异常回调
                    	layer.closeAll('loading'); //关闭loading
                    }
                });
            } 
    		
    		
    		
        var upload = layui.upload;
        
        //执行实例
        var uploadInst = upload.render({
            elem: '#upload' //绑定元素
            ,url: "{:url('upload')}" //上传接口
            ,accept:"file"
            ,multiple:"true"
            ,drag:"true"
            ,choose: function(obj){   
//              var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//              //读取本地文件
//              obj.preview(function(index, file, result){
//                 
//               $(".uploadName").html(file.name).show()
//              });
                

             }
            ,done: function(res){
            //上传完毕回调
            	if(res.code == 1){
                    uploadData.annex_name.push(res.data.annex_name)
                    uploadData.annex_url.push(res.data.annex_url)
            		$('#annex_name').val(uploadData.annex_name.toString());
            		$('#annex_url').val(uploadData.annex_url.toString());
                    $(".uploadName").html("").show()
                    uploadData.annex_name.forEach(index=>{
                        let uploadList=`<p >${index} <i class="layui-icon" >&#x1006;</i></p>`
                        $(".uploadName").append(uploadList)
                    })
            		layer.open({
                        title: '上传成功'
                        ,content: '上传成功',
                        icon:1
                    });
                    $(".download").hide();
                    $("#upload").css("margin-left","0")
            	}
            }
            ,error: function(){
            //请求异常回调
            }
        });
        });
        $(document).ready(function(){
           
            $(".uploadName").on("click", "p", function () {
                const uploadIndex=$(this).index()
               $.msg.confirm("确认删除",function(index){
                    uploadData.annex_name.splice(uploadIndex, 1);
                    uploadData.annex_url.splice(uploadIndex, 1);
                    console.log(uploadData)
                    
                    $('#annex_name').val(uploadData.annex_name.toString());
            		$('#annex_url').val(uploadData.annex_url.toString());
                    $(".uploadName").html("").show()
                    uploadData.annex_name.forEach(index=>{
                        let uploadList=`<p >${index} <i class="layui-icon" >&#x1006;</i></p>`
                        $(".uploadName").append(uploadList)
                    })
                   

                    layer.close(index)
               })
            })
        
        })
        
    	window.form.render();
    </script>
</form>
